<template>
  <!-- v-dialogDrag v-dragHide="isvisible"  -->
  <el-dialog
    v-dialogDrag="dialogId"
    v-dialogDragWidth
    v-dialogDragHeight="minHeight"
    class="sxDialog"
    :class="{ sxDialog__hiddenPadding: hiddenPadding }"
    :custom-class="className"
    :title="title"
    :width="width"
    append-to-body
    :top="top"
    :visible.sync="isvisible"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :modal="modal"
    :show-close="showClose"
    @open="dialogOpen"
    @close="dialogClose"
  >
    <div :style="{width:'100%',height:'100%'}" ref="slotRef">
      <slot></slot>
    </div>
    <div v-if="!disabledButton" slot="footer" class="sxDialog__footer">
      <slot name="footer">
        <el-button
          v-if="!hideConfirmButton"
          :loading="btnLoading"
          :size="$store.getters.size"
          type="primary"
          @click="dialogConfirm"
        >确定</el-button>
        <el-button :size="$store.getters.size" @click="dialogCancel">关闭</el-button>
      </slot>
    </div>
  </el-dialog>
</template>
<script>
export default {
  desc: "对话框组件",
  name: "SxDialog",
  props: {
    // 是否可以通过按下 ESC 关闭 Dialog
    closeOnPressEscape: {
      type: Boolean,
      default: false
    },
    // 是否可以通过点击 modal 关闭 Dialog
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
    // 弹窗id
    dialogId: {
      type: String,
      default: null
    },
    btnLoading: Boolean,
    // 控制显示隐藏
    visible: Boolean,
    // 标题
    title: String,
    // 宽度
    width: String,
    // 最小高度
    minHeight: String,
    // 是否需要遮罩层
    modal: { type: Boolean, default: true },
    // 弹窗距离窗口顶部
    top: String,
    // 自定义类名
    className: String,
    // 是否显示按钮
    disabledButton: {
      type: Boolean,
      default: false
    },
    // 隐藏确认按钮
    hideConfirmButton: {
      type: Boolean,
      default: false
    },
    //是否隐藏dialog-body内边距
    hiddenPadding: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    dialogId: {
      handler: value => {
        console.log(value);
        this.$nextTick(() => {
          if (value) {
            console.log(this.$refs.slotRef?.$el.parentNode);
          }
        });
      },
      deep: true
    }
  },
  data() {
    return {
      isvisible: false
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.isvisible = val;
      },
      immediate: true
    }
  },
  methods: {
    dialogOpen() {
      this.$emit("dialog-open");
    },
    dialogClose() {
      this.$emit("dialog-close", false);
    },
    dialogCancel() {
      this.$emit("dialog-cancel", false);
    },
    dialogConfirm() {
      this.$emit("dialog-confirm");
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@Components/assets/styles/element-variables.scss";
.sxDialog {
  /deep/ .el-dialog {
    display: flex;
    flex-direction: column;
    border-radius: 6px 6px 0 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    overflow: hidden;
    &__body {
      overflow: auto;
    }
  }
  /deep/ .el-dialog__footer {
    margin-top: auto;
  }
  &__footer {
    display: flex;
    justify-content: flex-end;
    button {
      &:last-child {
        margin-left: 10px;
      }
    }
  }
  /deep/ .el-dialog__body {
    padding: 0 !important;
    flex: 1;
  }
}
</style>
